<template>
	<view :style="colorStyle">
		<view class='address-management' :class='bankList.length < 1 && page > 1 ? "fff":""'>
			<view class='line'>
				<image src='../../../static/images/line.jpg' v-if="bankList.length"></image>
			</view>
			<radio-group class="radio-group" @change="radioChange" v-if="bankList.length">
				<view class='item' v-for="(item,index) in bankList" :key="index">
					<view class='address' @click='goOrder(item.id)'>
						<view>{{$t(`姓名`)}}：{{item.user_name}}</view>
						<view>{{$t(`银行`)}}：{{item.bank_name}}</view>
						<view>{{$t(`卡号`)}}：{{item.bank_account_number}}</view>
					</view>
					<view class='operation acea-row row-between-wrapper'>
						<!-- #ifndef MP -->
						<radio class="radio" :value="index.toString()" :checked="item.is_default ? true : false">
							<text>{{$t(`设为默认`)}}</text>
						</radio>
						<!-- #endif -->
						<!-- #ifdef MP -->
						<radio class="radio" :value="index" :checked="item.is_default ? true : false">
							<text>{{$t(`设为默认`)}}</text>
						</radio>
						<!-- #endif -->
						<view class='acea-row row-middle'>
							<view @click='editBank(item.id)'><text class='iconfont icon-bianji'></text>{{$t(`编辑`)}}
							</view>
							<view @click='delBank(index)'><text class='iconfont icon-shanchu'></text>{{$t(`删除`)}}
							</view>
						</view>
					</view>
				</view>
			</radio-group>
			<view class='loadingicon acea-row row-center-wrapper' v-if="bankList.length">
				<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
			</view>
			<view class='noCommodity' v-if="bankList.length < 1 && page > 1">
				<view class='pictrue'>
					<image :src="imgHost + '/statics/images/noAddress.png'"></image>
				</view>
			</view>
			<view style='height:120rpx;'></view>
			<view class='footer acea-row row-between-wrapper'>
				<view class='addressBnt on' @click='addBank'><text
						class='iconfont icon-tianjiadizhi'></text>{{$t(`添加新银行卡`)}}
        </view>
			</view>
		</view>
		<home></home>
	</view>
</template>

<script>
	import {
		getBankList,
		setBankDefault,
		delBank,
		editBank
	} from '@/api/user.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	// #ifdef MP
	import authorize from '@/components/Authorize';
	// #endif
	import home from '@/components/home';
	import colors from '@/mixins/color.js';
	import {
		HTTP_REQUEST_URL
	} from '@/config/app';
	export default {
		components: {
			// #ifdef MP
			authorize,
			// #endif
			home
		},
		mixins: [colors],
		data() {
			return {
				imgHost: HTTP_REQUEST_URL,
				bankList: [],
        orderId: '',
        fromType: '',
				loading: false,
				loadend: false,
				loadTitle: this.$t(`加载更多`),
				page: 1,
				limit: 20,
				noCoupon: 0
			};
		},
		computed: mapGetters(['isLogin']),
		onLoad(options) {
			if (this.isLogin) {
				this.orderId = options.order_id || '';
				this.fromType = options.from_type || 0;
				this.getBankList(true);
			} else {
				toLogin();
			}
		},
		onShow: function() {
			let that = this;
			that.getBankList(true);
		},
		methods: {
			onLoadFun: function() {
				this.getBankList();
			},
			/**
			 * 获取银行卡列表
			 * 
			 */
      getBankList: function(isPage) {
				let that = this;
				if (isPage) {
					that.loadend = false;
					that.page = 1;
					that.$set(that, 'bankList', []);
				};
				if (that.loading) return;
				if (that.loadend) return;
				that.loading = true;
				that.loadTitle = '';
				getBankList({
					page: that.page,
					limit: that.limit
				}).then(res => {
					let list = res.data;
					let loadend = list.length < that.limit;
					that.bankList = that.$util.SplitArray(list, that.bankList);
					that.$set(that, 'bankList', that.bankList);
					that.loadend = loadend;
					that.loadTitle = loadend ? that.$t(`我也是有底线的`) : that.$t(`加载更多`);
					that.page = that.page + 1;
					that.loading = false;
				}).catch(err => {
					that.loading = false;
					that.loadTitle = that.$t(`加载更多`);
				});
			},
			/**
			 * 设置默认地址
			 */
			radioChange: function(e) {
				let index = parseInt(e.detail.value),
					that = this;
				let bank = this.bankList[index];
				if (bank == undefined) return that.$util.Tips({
					title: that.$t(`您设置的默认地址不存在!`)
				});
				setBankDefault(bank.id).then(res => {
					for (let i = 0, len = that.bankList.length; i < len; i++) {
						if (i == index) that.bankList[i].is_default = true;
						else that.bankList[i].is_default = false;
					}
					that.$util.Tips({
						title: that.$t(`设置成功`),
						icon: 'success'
					}, function() {
						that.$set(that, 'bankList', that.bankList);
					});
				}).catch(err => {
					return that.$util.Tips({
						title: err
					});
				});
			},
			/**
			 * 编辑地址
			 */
			editBank: function(id) {
				let orderId = this.orderId,
            fromType = this.fromType;
				this.orderId = '';
				this.fromType = '';
				uni.navigateTo({
					url: '/pages/users/bank/index?id=' + id + '&order_id=' + orderId + '&from_type=' +
              fromType
				})
			},
			/**
			 * 删除地址
			 */
			delBank: function(index) {
				let that = this,
					bank = this.bankList[index];
				if (bank == undefined) return that.$util.Tips({
					title: that.$t(`您删除的地址银行卡不存在!`)
				});
				delBank(bank.id).then(res => {
					that.$util.Tips({
						title: that.$t(`删除成功`),
						icon: 'success'
					}, function() {
						that.bankList.splice(index, 1);
						that.$set(that, 'bankList', that.bankList);
					});
				}).catch(err => {
					return that.$util.Tips({
						title: err
					});
				});
			},
			/**
			 * 新增银行卡
			 */
			addBank: function() {
        let orderId = this.orderId,
            fromType = this.fromType;
        this.orderId = '';
        this.fromType = '';
				uni.navigateTo({
					url: '/pages/users/bank/index?order_id=' + orderId + '&from_type=' +
              fromType
				})
			},
			goOrder: function(id) {
        let orderId = '';
        let fromType = '';
				if (this.orderId && id) {
          orderId = this.orderId;
          fromType = this.fromType;
					this.orderId = '';
					this.fromType = '';

					uni.redirectTo({
						url: '/pages/goods/cashier/index?order_id=' + orderId + '&from_type=' + fromType
					})
				}
			}
		},
		onReachBottom: function() {
			this.getBankList();
		}
	}
</script>

<style>
	.address-management.fff {
		background-color: #fff;
		height: 1300rpx
	}

	.address-management .line {
		width: 100%;
		height: 3rpx;
	}

	.address-management .line image {
		width: 100%;
		height: 100%;
		display: block;
	}

	.address-management .item {
		background-color: #fff;
		padding: 0 30rpx;
		margin-bottom: 12rpx;
	}

	.address-management .item .address {
		padding: 30rpx 0;
		border-bottom: 1rpx solid #eee;
		font-size: 28rpx;
		color: #282828;
	}

	.address-management .item .address .consignee {
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 8rpx;
	}

	.address-management .item .address .consignee .phone {
		margin-left: 25rpx;
	}

	.address-management .item .operation {
		height: 83rpx;
		font-size: 28rpx;
		color: #282828;
	}

	.address-management .item .operation .radio text {
		margin-left: 13rpx;
	}

	.address-management .item .operation .iconfont {
		color: #2c2c2c;
		font-size: 35rpx;
		vertical-align: -2rpx;
		margin-right: 10rpx;
	}

	.address-management .item .operation .iconfont.icon-shanchu {
		margin-left: 40rpx;
		font-size: 38rpx;
	}

	.address-management .footer {
		position: fixed;
		width: 100%;
		background-color: #fff;
		bottom: 0;
		height: 106rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.address-management .footer .addressBnt {
		width: 330rpx;
		height: 76rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 76rpx;
		font-size: 30rpx;
		color: #fff;
		background-color: var(--view-theme);
	}

	.address-management .footer .addressBnt.on {
		width: 690rpx;
		margin: 0 auto;
	}

	.address-management .footer .addressBnt .iconfont {
		font-size: 35rpx;
		margin-right: 8rpx;
		vertical-align: -1rpx;
	}

	.address-management .footer .addressBnt.wxbnt {
		background-color: #FE960F;
	}
</style>
